<template>
  <div>
    <a-comment id="comment-area">
      <!-- <template v-slot:avatar>
        <a-avatar
          :src="require('../../assets//icon/icon.png')"
          alt="Han Solo"
        />
      </template> -->
      <template #avatar>
        <a-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
      </template>
      <template v-slot:content>
        <div>
          <a-row :gutter="[8, 8]">
            <a-col :span="22">
              <a-form-item>
                <a-input
                  id="my-textarea"
                  :rows="4"
                  v-model:value="content"
                  placeholder="回复内容"
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <a-form-item>
                <a-button
                  html-type="submit"
                  :loading="submitting"
                  type="primary"
                  @click="handleSubmit"
                  >回复</a-button
                >
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </template>
    </a-comment>
  </div>
</template>
<script>
// import { insertMsg } from 'network/ajax.js'

export default {
  data() {
    return {
      content: '',
      submitting: false,
    }
  },
  props: {
    parentMsgId: '',
    replyMsgUsername: '',
  },
  watch: {
    replyMsgUsername() {
      document
        .querySelector('#my-textarea')
        .setAttribute('placeholder', '回复: ' + '@' + this.replyMsgUsername)
    },
  },
  methods: {
    handleSubmit() {
      if (!this.content) {
        return
      }
      //   this.submitting = true
      console.log('this.content: ', this.content)
      console.log('this.parentMsgId: ', this.parentMsgId)
      //   insertMsg(this.content, this.parentMsgId, this.$store.state.userId)
      //     .then(res => {
      //       this.submitting = false
      //       this.content = ''
      //       document.querySelector('#my-textarea').setAttribute('placeholder', '')
      // this.$emit('reload')
      this.content = ''
      //     })
      //     .catch(err => {
      //       console.log(err)
      //       this.$router.push('/500')
      //     })
    },
    handleChange(e) {
      this.value = e.target.value
    },
  },
}
</script>
